<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-13 15:40:59
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-07-13 15:43:21
-->
<template>
  <div class="title-font-box">
    <div class="active-title-box"></div>
    <div class="font-title-flex row">
      <dv-decoration-1
        style="width:70px;height:20px;margin-right:20px;"
      /><slot></slot><dv-decoration-1
        style="width:70px;height:20px;margin-left:20px;"
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.title-font-box {
  text-align: center;
  color: #01c7ff;
  font-size: 20px;
  height: 44px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  .active-title-box {
    width: 391px;
    height: 55px;
    margin-top: -13px;
    transform-origin: 50% 100% 0;
    transform: perspective(391px) rotateX(-45deg);
    background-image: linear-gradient(180deg, #2242be 0%, #031353 100%);
  }
  .font-title-flex {
    position: absolute;
    display: flex;
    align-items: center;
  }
}
</style>
